<template>
    <a-card :bordered="false">
        <a-button-group style="margin-right: 8px;float: right">
            <a-button type="danger" @click="handleDelete">删除</a-button>
            <a-button type="primary" @click="handleEdit" style="margin-right: 8px;float: right" ><router-link :to="`/user/update/${this.detail.id}`">编辑</router-link></a-button>
        </a-button-group>

        <detail-list title="用户详细" :col="3">
            <detail-list-item term="ID">{{detail.id}}</detail-list-item>
            <detail-list-item term="用户名">{{detail.username}}</detail-list-item>
            <detail-list-item term="密码">{{detail.password}}</detail-list-item>
            <detail-list-item term="昵称">{{detail.nickname}}</detail-list-item>
            <detail-list-item term="地址">{{detail.address}}</detail-list-item>
            <detail-list-item term="简介">{{detail.info}}</detail-list-item>
            <detail-list-item term="性别">{{detail.sex}}</detail-list-item>
            <detail-list-item term="手机号">{{detail.phone}}</detail-list-item>
            <detail-list-item term="邮箱">{{detail.email}}</detail-list-item>
            <detail-list-item term="头像">{{detail.avatar}}</detail-list-item>
            <detail-list-item term="状态">{{$DICT.dictUserStatus.get(detail.status)}}</detail-list-item>
            <detail-list-item term="创建时间">{{detail.createTime}}</detail-list-item>
            <detail-list-item term="更新时间">{{detail.updateTime}}</detail-list-item>
        </detail-list>



        <a-divider style="margin-bottom: 32px"/>
        <!--多对多：UserRole-User-->
        <div class="title">用户角色关联-角色
            <a-button-group style="margin-right: 8px;float: right">
                <a-button type="primary" @click="handleAddUserRole" style="margin-right: 8px;float: right">添加</a-button>
            </a-button-group>
        </div>
        <a-form layout="horizontal" style="margin-bottom: 54px">
            <a-row>
                <a-col :md="8" :sm="24">
                    <a-form-item
                            label="角色ID"
                            :labelCol="{span: 5}"
                            :wrapperCol="{span: 18, offset: 1}"
                            style="margin-right: 10px"
                    >
                        <a-input v-model="queryUserRole.roleId" placeholder="请输入"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-form-item style="float: right;margin-bottom: 10px">
                <a-button-group>
                    <a-button type="primary" @click="handleUserRoleSearch">查询</a-button>
                    <a-button @click="resetQueryUserRole">重置</a-button>
                </a-button-group>
            </a-form-item>
        </a-form>
        <standard-table
                row-key="id"
                style="margin-bottom: 24px"
                :columns="userRoleColumns"
                :dataSource="userRoleData"
                :pagination="paginationUserRole"
                @change="onChangeUserRole"
                :scroll="{ x: 'calc(700px + 50%)' }"
        >

            <div slot="action" slot-scope="{text, record}">
                <a @click="handleUpdateUserRole(record)" style="margin-right: 8px">
                    <a-icon type="edit"/>
                    编辑
                </a>
                <a @click="handleDeleteUserRole(record.id)" style="margin-right: 8px; color: red">
                    <a-icon type="delete"/>
                    删除
                </a>
            </div>
        </standard-table>

        <!-- 抽屉：UserRole-User -->
        <UserRoleRoleDrawer
                :visible="addVisibleUserRole"
                @close="handleCloseAddUserRole"
                :user-id="detail.id"
                @change="loadDataUserRole"
                :is-add="true"
        />
        <UserRoleRoleDrawer
                :visible="updateVisibleUserRole"
                @close="handleCloseUpdateUserRole"
                :id="userRoleId"
                :is-add="false"
                @change="loadDataUserRole"
                ref="userRoleUserDrawer"
        />


    </a-card>
</template>

<script>
    import StandardTable from '@/components/table/StandardTable';
    import DetailList from '@/components/tool/DetailList';
    import {
        userService,
        userRoleService,
    } from "@/services";

    import {
        userRoleRoleColumns,
    } from "@/columns";

    import UserRoleRoleDrawer from '../drawer/userRoleRole';
    const DetailListItem = DetailList.Item


    export default {
        name: 'UserDetail',
        components: {
            DetailListItem,
            DetailList,
            StandardTable,
            UserRoleRoleDrawer,
        },
        data () {
            return {
                detail: {
                    id:'',
                    username:'',
                    password:'',
                    nickname:'',
                    address:'',
                    info:'',
                    sex:'',
                    phone:'',
                    email:'',
                    avatar:'',
                    status:'',
                    createTime:'',
                    updateTime:'',
                },



                /* 多对多表：UserRole*/
                queryUserRole: {
                    roleId:'',
                    userId:'',
                    current: 1,
                    size: 10
                },
                paginationUserRole: {
                    current: 1,
                    pageSize: 10,
                    total: 0
                }, // 分页器
                userRoleColumns: userRoleRoleColumns,
                userRoleData: [],
                /* 抽屉：UserRole */
                addVisibleUserRole: false,
                updateVisibleUserRole: false,
                userRoleId: '',
            }
        },
        async created() {
            await this.refresh();
        },
        /*页面显示*/
        activated() {
            this.refresh();
        },
        methods:{
            /*刷新方法*/
            async refresh() {
                this.detail.id = this.$route.params.id;
                await this.loadData();
                await this.loadDataUserRole();
            },

            /*主数据*/
            async loadData() {
                const result = await userService.getById({id:this.detail.id});
                if (result.code == 200) {
                    this.detail = result.data;
                }
            },
            handleDelete() {
                this.$confirm({
                    title: '删除' + this.detail.id,
                    content:'确定删除id为' + this.detail.id + "的这一项吗",
                    onOk:async () => {
                        const result =  await userService.remove(this.detail.id);
                        if (result.code == 204) {
                            this.$message.success('删除成功');
                            this.$router.go(-1);
                        } else {
                            this.$message.error('删除失败:' + result.msg);
                        }
                    }
                })
            },
            handleEdit() {

            },




            /*多对多：UserRole*/
            async loadDataUserRole() {
                /*构建请求参数*/
                this.queryUserRole.userId = this.detail.id;
                this.queryUserRole.current = this.paginationUserRole.current;
                this.queryUserRole.size = this.paginationUserRole.pageSize;

                /*请求接口*/
                const result = await userRoleService.page(this.queryUserRole);
                console.log(result);
                if (result.code == 200) {
                    this.userRoleData = result.data.records;
                }

                /*刷新分页信息*/
                this.paginationUserRole.current = result.data.current;
                this.paginationUserRole.pageSize = result.data.size;
                this.paginationUserRole.total = result.data.total;
            },
            handleUserRoleSearch() {
                this.loadDataUserRole();
            },
            resetQueryUserRole() {
                this.queryUserRole.userId = this.detail.id;
                this.queryUserRole.roleId = '';
            },
            /*打开-添加抽屉：userRole*/
            handleAddUserRole() {
                this.addVisibleUserRole = true;
            },
            /*关闭-添加抽屉: userRole*/
            handleCloseAddUserRole() {
                this.addVisibleUserRole = false;
                this.loadDataUserRole();
            },
            /*打开-更新抽屉：userRole*/
            handleUpdateUserRole(record) {
                this.userRoleId = record.id;
                this.updateVisibleUserRole = true;
            },
            /*关闭-更新抽屉：userRole*/
            handleCloseUpdateUserRole() {
                this.updateVisibleUserRole = false;
                this.loadDataUserRole();
            },
            /*更新分页信息：userRole*/
            onChangeUserRole(pagination) {
                this.paginationUserRole = pagination;
                this.loadDataUserRole();
            },
            /*删除*/
            async handleDeleteUserRole(id) {
                this.$confirm({
                    title: '删除' + id,
                    content: '确定删除id为' + id + "的这一项吗",
                    onOk: async () => {
                        const result = await userRoleService.remove(id);
                        if (result.code == 204) {
                            this.$message.success('删除成功');
                            this.loadDataUserRole();
                        } else {
                            this.$message.error('删除失败:' + result.msg);
                        }
                    }
                })
            },

        }
    }
</script>

<style lang="less" scoped>
    .title {
        color: @title-color;
        font-size: 16px;
        font-weight: bolder;
        margin-bottom: 16px;
    }
</style>
